<template>
  <div id="archives">
    <el-col :span="24" class="action-bar">
      <el-input v-model="input" class="action-bar-input" placeholder="请输入关键字"></el-input>
      <el-button type="primary" size="medium" @click="search">检索</el-button>
      <el-button type="primary" size="medium" @click="onDialog">上传</el-button>
    </el-col>
    <div class="el-checkbox">
      <el-checkbox v-model="showList.all" label="全选" @change="allCheckBox"></el-checkbox>
      <el-checkbox v-model="showList.loadUpnum" label="下载次数" @change="itemCheckBox"></el-checkbox>
      <el-checkbox v-model="showList.fileType" label="文件格式" @change="itemCheckBox"></el-checkbox>
      <el-checkbox v-model="showList.fileSize" label="大小" @change="itemCheckBox"></el-checkbox>
    </div>

    <!--列表-->
    <el-table :data="activityList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="40" sortable></el-table-column>
      <el-table-column prop="id" label="档案编号" min-width="120" sortable></el-table-column>
      <el-table-column prop="name" label="档案名称" min-width="200"  sortable></el-table-column>
      <el-table-column prop="created_at" label="收录时间" min-width="120" sortable></el-table-column>
      <el-table-column prop="updated_at" label="更新时间" min-width="120" sortable></el-table-column>
      <el-table-column prop="browse_count" label="浏览次数" min-width="120" sortable></el-table-column>
      <el-table-column prop="download_count" label="下载次数" min-width="120" sortable v-if="showList.loadUpnum"></el-table-column>
      <el-table-column prop="file_type" label="文件格式" min-width="120" sortable v-if="showList.fileType"></el-table-column>
      <el-table-column label="大小" min-width="80" sortable v-if="showList.fileSize">
        <template slot-scope="scope">
          <p>{{scope.row.file_size}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template slot-scope="scope">
            <el-button type="danger" class="danger-btn" size="mini" @click="downloadArchives(scope.row.id)">下载</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="getArchivesInfo(scope.row.id)">更新</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delArchives(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-col>

    <!-- 添加 -->
    <!-- 新增 -->
    <el-dialog title="上传/更新档案" :visible.sync="addFormVisible" width="33%">
      <el-form label-width="20%" label-position="left">
        <el-form-item label="档案名称">
          <el-input v-model="addFrom.name" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addFrom.sort" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="档案上传">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://aidangjian.rzkeji.com/api/admin/sys/addArchives"
            :data="addFrom"
            multiple
            :limit="1"
            :auto-upload="false"
            :on-success="handUploadSuccess"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传单个文件，不限制大小和类型</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addArchives">确认</el-button>
          <el-button @click.native="addFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      addFormVisible: false,
      activityList:[],
      total: 0,
      pagesize: 10,
      page: 1,
      input: '',
      addFrom:{
        name:'',
        sort:''
      },
      fileList:[],
      showList: {
        loadUpnum: false,
        fileType: false,
        fileSize: false,
        all: false
      },
    }
  },
  mounted() {
    this.getArchivesList();
  },
  methods:{
    //获取档案详情
    async getArchivesInfo(id){
      let params = {
        id: id
      }
      const res = await this.$api.getArchivesInfo(params);
      if (res.data.level == 'success'){
        this.addFrom = res.data.data;
        this.getFileName(id);
        this.addFormVisible = true;
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    //获取档案列表
    async getArchivesList(){
      let params = {
        page: this.page,
        limit: this.pagesize,
        keyword: this.input
      }
      const res = await this.$api.getArchivesList(params);
      if(res.data.level == 'success'){
        this.activityList = res.data.data;
        for (let i=0;i<this.activityList.length;i++){
          if (this.activityList[i].file_size >= 1024*1024) {
            this.activityList[i].file_size = parseInt(this.activityList[i].file_size/1024/1024)+'M';
          }else if (this.activityList[i].file_size >= 1024) {
            this.activityList[i].file_size = parseInt(this.activityList[i].file_size/1024)+'KB';
          }else {
            this.activityList[i].file_size = this.activityList[i].file_size+'B';
          }
        }
        this.total = res.data.page_info.total;
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    //上传或更新档案
    async addArchives(){
      if (this.fileList.length==0){
        this.$refs.upload.submit();
      }else {
        const res = await this.$api.addArchives(this.addFrom);
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.addFrom = {
            name: '',
            sort: ''
          }
          this.addFormVisible = false;
          this.getArchivesList();
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      }
    },
    //上传成功触发
    handUploadSuccess(res, file){
      if (res.level == 'success'){
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.addFormVisible = false;
        this.addFrom = {
          name:'',
          sort:''
        }
        this.getArchivesList();
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
      }
    },
    //删除档案
    async delArchives(id){
      let params = {
        id : id
      }
      const res = await this.$api.delArchives(params);
      if (res.data.level == 'success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.getArchivesList();
      }else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    //下载档案
    async downloadArchives(id){
      let params = {
        id : id
      }
      const res = await this.$api.downloadArchives(params)
      console.log(res)
      if (res.data.level == 'success'){
        this.downloadUrlFile(res.data.data.url,res.data.data.file_name);
      }else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    downloadUrlFile(url,name){
      url= url.replace(/\\/g, '/');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          // 获取文件blob数据并保存
          var fileName = name;
          this.saveAs(xhr.response, fileName);
        }
      }
      xhr.send();
    },
    saveAs(data,name){
      var urlObject = window.URL || window.webkitURL || window;
      var export_blob = new Blob([data]);
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml','a')
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      save_link.click();
    },
    async getFileName(id){
      let params = {
        id:id
      }
      const res = await this.$api.downloadArchives(params)
      if (res.data.level == 'success'){
        var num = res.data.data.lastIndexOf('/')+1
        var fileName = res.data.data.substring(num)
        //把参数和文件名分割开
        fileName = decodeURI(fileName.split("?")[0]);
        this.fileList.push({
          name:fileName,
          url:res.data.data
        })
      }
    },
    onDialog(){
      this.addFormVisible = true;
    },
    //检索
    search(){
      this.getArchivesList()
    },
    //分页按钮显示
    currentChange(id){
      this.page = id;
      this.getArchivesList();
    },
    //全选
    allCheckBox(){
      if (this.showList.all){
        this.showList.fileSize = true;
        this.showList.fileType = true;
        this.showList.loadUpnum = true;
      }else {
        this.showList.fileType = false;
        this.showList.fileSize = false;
        this.showList.loadUpnum = false;
      }
    },
    itemCheckBox(){
      if (this.showList.fileSize&&this.showList.fileType&&this.showList.loadUpnum){
        this.showList.all = true;
      }else {
        this.showList.all = false;
      }
    }
  },
  watch:{
    'addFormVisible':function (news) {
      if (news == false){
        this.addFrom = {
          name:'',
          sort:''
        }
        this.fileList = [];
      }
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
